<template>
  <div class="anchorBox">
    <div class="anchorTitleBox">
      <span class="anchorTitle">热门主播</span>
    </div>
    <ul class="anchorUl">
      <li v-for="item in anchorList" :key="item.id" class="anchorItem">
        <img class="anchorItemPic" :src="item.avatarUrl" alt="" />
        <div class="anchorItemInformation">
          <p>{{ item.nickName }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { geranchor } from "@/api";
export default {
  data() {
    return {
      anchorList: [],
    };
  },
  created() {
    this.getanchor();
  },
  methods: {
    getanchor() {
      geranchor({ limit: 5 }).then((res) => {
        // console.log(123, res);
        this.anchorList = res.data.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.anchorBox {
  margin-top: 15px;
  .anchorTitleBox {
    height: 23px;
    margin: 0 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    .anchorTitle {
      font-weight: 700;
    }
  }
  .anchorUl {
    margin: 20px 0 0 20px;
    .anchorItem {
      display: flex;
      cursor: pointer;
      width: 210px;
      margin-bottom: 10px;
      .anchorItemPic {
        width: 40px;
        height: 40px;
      }
      .anchorItemInformation {
        font-size: 14px;
        width: 160px;
        padding-left: 14px;
      }
    }
  }
}
</style>